<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="script/jquery-1.10.min.js">
// <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
<!-- <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> -->
<script src="script/bootstrap-3.3.7.min.js"></script>


<script>
$(document).ready(function(){
            //样例数据
 	var json_data_ex= {"data": [{"name": "\u6d4b\u8bd5\u4efb\u52a1", "tag": "\u6d4b\u8bd5\u4efb\u52a1\u6807\u7b7e", "create_user": "org", "total_run_count": 36, "create_time": "2018-06-04-15:19", "app_name": "\u4e91\u7ba1\u5e73\u53f0\u73af\u5883", "id": 7, "last_run_time": "2018-06-05 10:23"}], "success": true}

    function table_append(dom,data){
    	// console.log(1)
    	    $(dom + ' tbody').empty()

            $.each(data, function(index, obj) { // 通用方法，表格添加数据
        // alert(index +"-"+obj.tagName); index序号,
            $(dom + ' tbody').append("<tr><td> <input type=checkbox data-target="+obj.id+"> </td>\
            	<td>"+index+"</td>\
                   <td data-target=name>"+obj.name+"</td>\
                   <td data-target=tag>"+obj.tag+"</td>\
                   <td data-target=create_user>"+obj.create_user+"</td>\
                   <td data-target=total_run_count>"+obj.total_run_count+"</td>\
                   <td data-target=app_name>"+obj.app_name+"</td>\
                   <td data-target=create_time>"+obj.create_time+"</td>\
                   <td data-target=last_run_time>"+obj.last_run_time+"</td>\
                   </tr>")
            });

    }

	$("#table_reload").click(function(){ //请求数据

    $.ajax({
        type: 'get',
        url: 'http://127.0.0.1:8000/app_center/capsule_list',
    //如果是json data 加入 contentType: 'application/json;charset=utf-8',
        data:    {app_id:1}, //get 参数

        success: function (json_data,status) { //返回json结果
          // alert("数据：" + data + "\n状态：" + status);
          if (json_data.success ){
                table_append(("#t"),json_data.data)
          }
          else{
            alert("请求数据异常,使用样例数据")
            table_append(("#t"),json_data_ex.data)
          }
        },

        error: function (xhr,status) { //如果出错 返回样例数据
          alert("错误数据：" + xhr + "\n 状态：" + status  +"\n 使用样例数据");
          table_append(("#t"),json_data_ex.data)
        }

        });
	});

	$("#submit").click(function(){ //ajax 发送json数据

		// $('#t tbody tr').each(function(i){                   // 遍历 tr
  //     		$(this).children('td').each(function(j){  // 遍历 tr 的各个 td
  //        		alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
  //     		});
  //  		});
  		var json_array=[];
  		// $("#t tbody input[type=checkbox]:checked").each(function(index){ 
  		//选择器所有checkbox 不用在判断 	
		$("#t tbody input[type=checkbox]").each(function(index){ //选择所有checkbox 
				if ($(this).is(":checked")){		//判断是否选中
					var serializeObj={}; 
					var id = jQuery($(this)).data("target") //提取  data-target的值 
					serializeObj['id'] = id

					var b = $(this).parent().parent() //checkbox父节点是 td在 父节点是tr					
					b.children('td').each(function(j){  //遍历行的所有列
						// console.log(j,$(this).text())
						serializeObj[ jQuery($(this)).data("target") ] = $(this).text()
					})
				}else{
					alert("没有选中的")
				}
				json_array.push(serializeObj)
		});

			    $.ajax({           //发送json数据   
			    	async:true,
			        type: "post",   //必须用post
			        url: "http://127.0.0.1:8000/app_center/capsule_list",
			        // data: JSON.stringify({1:2}),
			        data: JSON.stringify(json_array),
			        dataType: 'json',
 					// headers:{Accept:"application/json","Content-Type":"application/json"},
 					processData:false,
 					cache:false,
			        success: function (message) {
			            if (message > 0) {
			                alert("请求已提交");
			            }
			        },
			        error: function (message) {
			            alter("提交数据失败！");
			        }
   					 });
	




	});

});

</script>
</head>
<body>

<button id="table_reload">加载数据</button>
<button id="submit">提交</button>

<table id="t" class="table">
	<thead>
		<th></th>
		<th>序号</th>
		<th>任务名称</th>
		<th>任务标签</th>
		<th>创建用户</th>
		<th>统计次数</th>
		<th>应用名称</th>
		<th>创建时间</th>
		<th>修改时间</th>
	</thead>
	<tbody>
	</tbody>
</table>
</body>
</html>
